<template>
  <div class="login-page">
    <div class="titleText">
      <p>今日舔狗日记：{{ responseTexts }}</p>
    </div>

    <div class="login-box">
      <h2 >Welcome Back!</h2>
      <!-- <p class="sub-text">Please login to continue</p> -->

      <form class="login-form" @submit.prevent="onSubmit">
        <div class="input-group">
          <i class="fas fa-envelope"></i>
          <input type="email" placeholder="Email" required />
        </div>

        <div class="input-group">
          <i class="fas fa-lock"></i>
          <input type="password" placeholder="Password" required />
        </div>

        <div class="input-group">
          <i class="fas fa-shield-alt"></i>
          <input 
            type="text" 
            placeholder="请输入验证码" 
            maxlength="6" 
            required 
          />
          <img
            src="https://via.placeholder.com/80x30?text=验证码" 
            alt="captcha"
            class="captcha-img" 
            @click="refreshCaptcha"
          />
        </div>

        <button type="submit">登录/注册</button>
      </form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const responseTexts = ref('');


  
  // 在组件挂载时执行 API 请求
  onMounted(() => {
    // 创建一个新的 XMLHttpRequest 对象
    const http = new XMLHttpRequest()
  
    // 配置请求类型、URL、是否异步
    http.open('GET', 'https://api.oick.cn/dog/api.php', true)
  
    // 请求完成后的处理函数
    http.onreadystatechange = function () {
      // 判断请求是否完成且状态码为200
      if (http.readyState === 4 && http.status === 200) {
        // 响应结果
        responseTexts.value = http.responseText
        console.log(http.responseText) // 这里你可以将响应数据更新到你的 Vue 数据中
      }
    }
  
    // 发送请求
    http.send()



  })



// 模拟验证码刷新逻辑
const refreshCaptcha = () => {
  console.log('刷新验证码'); // 可以替换为实际的 API 调用
};

const onSubmit = (event: Event) => {
  console.log('表单已提交');
};
</script>

<style lang="scss" scoped>
/* 页面背景 */
.login-page {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/images/background1.jpeg");
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

/* 标题文本固定在顶部 */
.titleText {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 18px;
  color: white;
  z-index: 1;
}



/* 登录框样式 */
.login-box {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(1px);
  padding: 40px;
  border-radius: 12px;
  width: 350px;
  text-align: center;
}

/* 标题样式 */
.login-box h2 {
  font-size: 28px;
  color: #ffffff;
  margin-bottom: 10px;
}

/* 副标题 */
.sub-text {
  color: #ffffff;
  opacity: 0.8;
  margin-bottom: 20px;
}

/* 输入框和按钮容器 */
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 输入框样式 */
.input-group {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: white;
  margin: 10px 0;
  border-radius: 8px;
  padding: 10px;
}

.input-group input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 16px;
}

.input-group i {
  margin-right: 8px;
  font-size: 18px;
  color: gray;
}

/* 验证码图片样式 */
.captcha-img {
  margin-left: 8px;
  cursor: pointer;
  border-radius: 4px;
}

/* 按钮样式 */
button {
  width: 100%;
  padding: 12px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 15px;
}

button:hover {
  background-color: #45a049;
}
</style>
